<template>
  <section class="w-[490px]">
    <article
      class="h-[55px] px-4 py-3 text-lg bg-[#f7f7f7] border-l border-l-[#dedede] border-b border-b-[#dedede]"
    ></article>
    <VideoView />
    <article class="h-[340px] border-b border-b-[#dedede]">接收消息{{ dateTime }}</article>

    <article class="pt-4">
      <div class="flex gap-x-3 items-center ml-4">
        <im-icon icon="icon-emoji" size="24" class="hover:text-[--im-green-color]" />
        <im-icon icon="Folder" size="20" class="hover:text-[--im-green-color]" />
        <im-icon icon="icon-jianqie" size="24" class="hover:text-[--im-green-color]" />
        <im-icon
          icon="ChatDotRound"
          size="20"
          class="hover:text-[--im-green-color]"
          @click="toChatHistory"
        />
      </div>
    </article>
  </section>
</template>
<script lang="ts" setup>
import VideoView from './videoView.vue'
const dateTimeChannel = new BroadcastChannel('dateTimeChannel')
const dateTime = ref('')
dateTimeChannel.onmessage = (event) => {
  console.log(event.data)

  dateTime.value = event.data
}
function toChatHistory() {
  window.api.createChildWindow('/chatHistory')
}
</script>
<style lang="scss" scoped></style>
